<template>
  <div class="audition71">
    <h3>data-*的书写格式：</h3>
    <p>data-字符串-字符串-...</p>
    <p>比如：data-href, data-id</p>
    <p>--------------------------------------------------</p>
    <h3>data-*的作用：</h3>
    <p>data-*是html5新属性，作用是：</p>
    <p>1. 用于储存页面或应用程序的私有自定义数据</p>
    <p>2. 赋予我们在所有html元素上嵌入自定义data属性的能力</p>
    <p>--------------------------------------------------</p>
    <h3>存取data-*的数据</h3>
    <p>存：</p>
    <p>通过js的setAttribute方法: </p>
    <code class="code">
      dom.setAttribute('data-xx', '字符串内容')
    </code>
    <p>通过dataset对象：</p>
    <code class="code">
      dom.dataset.xx = '字符串内容'
    </code>
    <p>取：</p>
    <p>通过js的getAttribute方法：</p>
    <code class="code">
      dom.getAttribute('data-xx')
    </code>
    <p>通过dataset对象：</p>
    <code class="code">
      dom.dataset.xx
    </code>
    <p>--------------------------------------------------</p>
    <h3>说说dataset</h3>
    <p>dataset是一个私有属性对象，它包含了所有data-*的属性和值</p>
    <p>示例</p>
    <code class="code">
      &lt;a<br />
      <span class="indient">class="alink"</span><br />
      <span class="indient">href="https://www.baidu.com/"</span><br />
      <span class="indient">data-href="www.baidu.com"</span><br />
      &gt;<br />
      &lt;/a&gt;<br />
      <br />
      var _a = document.querySelector('.alink')<br />
      // 添加新属性data-id，值为'2333'<br />
      _a.dataset.id = '2333'<br />
      // 获取_a元素的自定义属性对象dataset<br />
      console.log(_a.dataset) // {href: 'www.baidu.com', id: '2333'}<br />
      console.log('data-href: ', _a.dataset.href) // 'www.baidu.com'  string
    </code>
    <p>--------------------------------------------------</p>
    <h3>data-*的优势：</h3>
    <p>自定义属性语义化更强，存取更方便</p>
    <p>自定义的数据可以让页面拥有更好的交互体验（不需要使用 Ajax 或去服务端查询数据）。</p>
  </div>
</template>

<script>
export default {
  name: 'Audition71',
}
</script>

<style>

</style>